<template>
    <div id='' class='i_login'>
        <div class="title_logo">
            <img :src="tl" alt="" srcset="">
        </div>
        <div class="left_img" />
        <div class="login_content">
            <div class="logo">
                <img :src="lo" alt="" srcset="">
            </div>
            <div class="title">登录</div>
            <div class="info">
                <input type="text" placeholder="请输入用户名" v-model="loginInfo.username">
                <input type="password" placeholder="请输入密码" v-model="loginInfo.password" @keydown.enter="enterToLogin">
            </div>
            <div class="remember">
                <!-- <Checkbox v-model="single">记住密码</Checkbox> -->
            </div>
            <div class="but_group" @click="handleSubmit">
                <span> 登录 </span>
            </div>
        </div>
    </div>
</template>
<script>
import titleLogo from '@/assets/images/login/quanjilogo.png'
import logo from '@/assets/images/login/logo1.png'

import iCopyright from '@/components/copyright';
import { mapActions } from 'vuex';
import mixins from '../mixins';
var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv"
    + "wxyz0123456789+/" + "=";
export default {
    name: '',
    props: [''],
    data() {
        return {
            tl: titleLogo,
            lo: logo,
            single: false,
            autoLogin: true,
            loginInfo: {
                username: '',
                password: ''
            }
        };
    },
    mixins: [mixins],
    components: { iCopyright },
    computed: {},
    beforeMount() { },
    mounted() { },
    methods: {
        ...mapActions('admin/account', [
            'login'
        ]),
        enterToLogin(ev) {
            ev.keyCode === 13 && this.handleSubmit()
        },
        handleSubmit() {
            let { username, password } = this.loginInfo;
            if (username == '') {
                return this.$Message.warning('请输入用户名');
            }
            if (password == '') {
                return this.$Message.warning('请输入密码');
            }
            password = this.encode64(password);
            this.login({
                username,
                password
            }).then((data) => {
                // 重定向对象不存在则返回顶层路径
                // this.$router.replace(this.$route.query.redirect || '/');
                if (data && data.code == 500) {
                    if (data.msg) {
                        return this.$Message.warning(data.msg);
                    } else {
                        return this.$Message.warning('用户名密码错误');
                    }
                }
                this.$router.replace('/root/home');
            });
        },
        encode64(input) {
            var output = "";
            var chr1, chr2, chr3 = "";
            var enc1, enc2, enc3, enc4 = "";
            var i = 0;
            do {
                chr1 = input.charCodeAt(i++);
                chr2 = input.charCodeAt(i++);
                chr3 = input.charCodeAt(i++);
                enc1 = chr1 >> 2;
                enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
                enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
                enc4 = chr3 & 63;
                if (isNaN(chr2)) {
                    enc3 = enc4 = 64;
                } else if (isNaN(chr3)) {
                    enc4 = 64;
                }
                output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2)
                    + keyStr.charAt(enc3) + keyStr.charAt(enc4);
                chr1 = chr2 = chr3 = "";
                enc1 = enc2 = enc3 = enc4 = "";
            } while (i < input.length);
            return output;
        }
    },
    watch: {}
}
</script>
<style lang='less' scoped>
.i_login {
    background: url("../../../assets/images/login/logninbg.png") no-repeat;
    background-size: 100% 100%;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .title_logo {
        position: absolute;
        left: 136px;
        top: 101px;
        img {
            width: 680px;
            height: 144px;
        }
    }
    .left_img {
        position: absolute;
        left: 0;
        bottom: 0px;
        background: url("../../../assets/images/login/left.png") no-repeat;
        background-size: 100% 100%;
        width: 1080px;
        height: 600px;
    }
    .login_content {
        position: absolute;
        background: #ffffff;
        width: 456px;
        height: 400px;
        background: #ffffff;
        box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.16);
        border-radius: 16px 16px 16px 16px;
        opacity: 1;
        right: 246px;
        top: 254px;
        padding: 20px 48px;
        .logo {
            width: 100%;
            display: flex;
            justify-content: end;
            align-items: center;
        }
        .title {
            font-size: 24px;
            font-family: PingFang SC-Bold, PingFang SC;
            font-weight: bold;
            color: #223893;
            height: 78px;
            line-height: 78px;
        }
        .info {
            display: flex;
            flex-direction: column;
            input {
                width: 360px;
                height: 48px;
                background: #ffffff;
                border-radius: 4px 4px 4px 4px;
                opacity: 1;
                border: 1px solid #e9ecf2;
                padding: 0 20px;
                color: #515a6e;
            }
            input:not(:first-child) {
                margin-top: 30px;
            }
            input:focus {
                outline: 1px solid #fff !important;
            }
            input::-webkit-input-placeholder {
                /* WebKit, Blink, Edge */
                color: #cccfd4;
                font-size: 16px;
            }
        }
        .but_group {
            cursor: pointer;
            width: 100%;
            height: 48px;
            background: #2d8cf0;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                font-size: 16px;
                font-family: PingFang SC-Bold, PingFang SC;
                font-weight: bold;
                color: #ffffff;
            }
        }
        .remember {
            // height: 58px;
            height: 28px;
            display: flex;
            align-items: center;
        }
    }
}
</style>